<template>
	<nav class="header">
		<div class="container">
			<div class="logo">
				<img src="@/assets/logo.png" alt="汉中旅游logo" />
			</div>
			<div class="nav-links" :class="{ 'active': mobileMenu }">
				<router-link to="/" class="nav-item">首页</router-link>
				<router-link to="/attractions" class="nav-item">景点介绍</router-link>
				<router-link to="/routes" class="nav-item">旅游线路</router-link>
				<el-dropdown>
					<el-button type="text" class="nav-item">
						旅游攻略 ▼
					</el-button>
					<el-dropdown-menu slot="dropdown" class="custom-dropdown">
						<el-dropdown-item>
							<router-link to="/guide/traffic" style="color: inherit; text-decoration: none;">
								<el-icon style="margin-right: 8px;"><el-icon-car /></el-icon>交通指南
							</router-link>
						</el-dropdown-item>
						<el-dropdown-item>
							<router-link to="/guide/accommodation" style="color: inherit; text-decoration: none;">
								<el-icon style="margin-right: 8px;"><el-icon-house /></el-icon>住宿推荐
							</router-link>
						</el-dropdown-item>
						<el-dropdown-item>
							<router-link to="/guide/tips" style="color: inherit; text-decoration: none;">
								<el-icon style="margin-right: 8px;"><el-icon-warning /></el-icon>注意事项
							</router-link>
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<router-link to="/food" class="nav-item">美食推荐</router-link>
				<router-link to="/events" class="nav-item">汉文化活动</router-link>
				<router-link to="/contact" class="nav-item">联系我们</router-link>
				<router-link to="/faq" class="nav-item">常见问题</router-link>
			</div>
			<div class="header-search">
				<el-input placeholder="搜索景点或美食..." v-model="searchKeyword" clearable @keyup.enter.native="handleSearch"
					class="search-input" size="medium">
					<el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
				</el-input>
			</div>
			<div class="header-user">
				<el-button v-if="!isLoggedIn" type="text" class="nav-item"
					@click="$router.push('/login')">登录</el-button>
				<el-dropdown v-else class="avatar-dropdown">
					<el-avatar size="medium" :src="userAvatar || defaultAvatar" @error="handleAvatarError"
						class="avatar-img">
					</el-avatar>
					<span>{{name}}</span>
					<el-dropdown-menu slot="dropdown" class="logout-menu">
						<el-dropdown-item @click.native="$router.push('/profile')">
							<i class="el-icon-user" style="margin-right: 8px;"></i>个人中心
						</el-dropdown-item>
						<el-dropdown-item @click.native="handleLogout()">
							<i class="el-icon-switch-button" style="margin-right: 8px;"></i>退出登录
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
			<button class="mobile-menu-btn" @click="mobileMenu = !mobileMenu">
				<span></span>
				<span></span>
				<span></span>
			</button>
		</div>
	</nav>
</template>

<script>
	export default {
		computed: {
			// 检查sessionStorage中是否存在userToken、account和password
			isLoggedIn() {
				return (
					!!sessionStorage.getItem('userToken') &&
					!!sessionStorage.getItem('account') &&
					!!sessionStorage.getItem('password')
				);
			},
			// 获取用户头像，优先使用sessionStorage中的数据
			userAvatar() {
				if (sessionStorage.getItem('image') == null) {
					return defaultAvatar();
				}
				return sessionStorage.getItem('image');
			},
			defaultAvatar() {
				return require('@/assets/logo.png')
			}
		},
		data() {
			return {
				name: sessionStorage.getItem('name'),
				mobileMenu: false,
				// 存储默认头像路径，避免重复加载
				defaultAvatarPath: require('@/assets/logo.png'),
				searchKeyword: '',
				path: ''
			}
		},
		methods: {
			handleLogout() {
				console.log('执行退出登录...');

				// 移除sessionStorage中的登录信息
				sessionStorage.removeItem('userToken');
				sessionStorage.removeItem('account');
				sessionStorage.removeItem('password');
				sessionStorage.removeItem('avatar');

				console.log('sessionStorage已清空:', sessionStorage);

				// 导航到首页
				this.$router.push('/');

				// 强制页面刷新以更新状态
				// 注意：如果仍然有问题，可以尝试注释掉下面这行，改用响应式更新
				window.location.reload();
			},
			handleAvatarError() {
				// 头像加载失败时使用默认头像
				this.$refs.avatar.src = this.defaultAvatarPath;
			},
			checkLoginStatus() {
				// 检查登录状态的逻辑
				const isLoggedIn = (
					!!sessionStorage.getItem('userToken') &&
					!!sessionStorage.getItem('account')
				);

				// 处理登录状态变化时的UI更新
				if (this.isLoggedIn !== isLoggedIn) {
					this.$nextTick(() => {
						// 强制更新计算属性，确保UI同步
						this.isLoggedIn;
					});
				}
			},
			handleSearch() {
				const keyword = this.searchKeyword.trim();
				if (!keyword) {
					this.$message({
						message: '请输入搜索内容',
						type: 'warning'
					});
					return;
				}

				// 先设置默认路径
				this.path = '/attractions';

				// 使用async/await处理异步请求
				this.$http.get("userApi/attractions/searchByWord?keyword=" + keyword)
					.then((resp) => {
						if (resp.data.code === 200) {
							console.log('API返回的数据:', resp.data.data);
							// 确保API返回的数据是有效的路径
							if (resp.data.data && typeof resp.data.data === 'string') {
								
								this.path = resp.data.data;
							} else {
								console.warn('API返回的路径无效:', resp.data.data);
								// 保持默认路径不变
							}
						} else {
							console.error('API请求失败:', resp.data);
							this.$message({
								message: '搜索失败，请重试',
								type: 'error'
							});
						}
					})
					.catch((error) => {
						console.error('网络错误:', error);
						this.$message({
							message: '网络错误，请检查连接',
							type: 'error'
						});
					})
					.finally(() => {
						// 无论请求成功或失败，都执行跳转
						console.log('最终跳转路径:', this.path);
						// 使用push而不是replace，避免页面刷新
						this.$router.push({
							path: this.path,
							query: {
								q: keyword
							}
						});
						this.searchKeyword = '';
					});
			}
		},
		mounted() {
			// 组件挂载时检查登录状态
			this.checkLoginStatus();
			// 监听storage事件，处理其他标签页登录状态变化
			window.addEventListener('storage', this.checkLoginStatus);
		},
		beforeUnmount() {
			// 组件卸载时移除事件监听
			window.removeEventListener('storage', this.checkLoginStatus);
		}
	}
</script>

<style scoped>
	/* 样式部分保持不变，无需修改 */
	.header {
		position: fixed;
		top: 0;
		width: 100%;
		background: linear-gradient(90deg, #f0f9ff 0%, #e0f2fe 100%);
		box-shadow: 0 4px 24px rgba(52, 152, 219, 0.10);
		z-index: 1000;
		border-radius: 0 0 18px 18px;
		transition: box-shadow 0.3s;
	}

	.container {
		max-width: 1800px;
		margin: 2px auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 18px 36px 18px 36px;
		gap: 0;
	}

	.logo img {
		height: 64px;
		width: 64px;
		border-radius: 50%;
		object-fit: cover;
		box-shadow: 0 2px 12px rgba(52, 152, 219, 0.10);
		background: #f8fafd;
		transition: box-shadow 0.3s;
	}

	.header-search {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin: 0 32px 0 32px;
		gap: 12px;
	}

	.search-type-tabs {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-right: 8px;
	}

	.search-type-tab {
		padding: 6px 18px;
		border-radius: 16px;
		background: #f4faff;
		color: #3498db;
		font-weight: 500;
		font-size: 1.05rem;
		cursor: pointer;
		transition: all 0.2s;
		border: 1.5px solid #e0f2fe;
		box-shadow: 0 1px 4px rgba(52, 152, 219, 0.04);
		user-select: none;
	}

	.search-type-tab.active {
		background: linear-gradient(90deg, #3498db 0%, #6dd5fa 100%);
		color: #fff;
		border-color: #3498db;
		box-shadow: 0 2px 8px rgba(52, 152, 219, 0.10);
		transform: scale(1.08);
	}

	.search-input {
		width: 300px;
		max-width: 60vw;
		border-radius: 24px !important;
		background: #f4faff !important;
		box-shadow: 0 2px 12px rgba(52, 152, 219, 0.08);
		border: 1.5px solid #e0f2fe;
		transition: box-shadow 0.3s, border 0.3s;
	}

	.search-input:focus-within {
		border: 1.5px solid #3498db;
		box-shadow: 0 4px 16px rgba(52, 152, 219, 0.18);
	}

	.nav-links {
		display: flex;
		gap: 25px;
		align-items: center;
		justify-content: center;
		min-width: 0;
	}

	.nav-item {
		text-decoration: none;
		color: #2c3e50;
		font-weight: 500;
		transition: all 0.3s;
		padding: 10px 22px 8px 22px;
		border-radius: 18px 18px 0 0;
		font-size: 1.08rem;
		background: transparent;
		position: relative;
	}

	.nav-item:hover,
	.nav-item.router-link-exact-active {
		background: #e6f7ff;
		color: #3498db;
		box-shadow: 0 2px 8px rgba(52, 152, 219, 0.08);
	}

	.nav-item.router-link-exact-active::after,
	.nav-item:hover::after {
		content: '';
		display: block;
		position: absolute;
		left: 18%;
		right: 18%;
		bottom: 0;
		height: 3px;
		border-radius: 2px;
		background: linear-gradient(90deg, #3498db 0%, #6dd5fa 100%);
		transition: all 0.3s;
	}

	.header-user {
		display: flex;
		align-items: center;
		gap: 18px;
		margin-left: 0;
		margin-right: 0;
	}

	.el-button.nav-item {
		border-radius: 20px !important;
		background: linear-gradient(90deg, #3498db 0%, #6dd5fa 100%);
		color: #fff !important;
		font-weight: bold;
		font-size: 1.08rem;
		box-shadow: 0 2px 8px rgba(52, 152, 219, 0.12);
		border: none;
		transition: background 0.3s, box-shadow 0.3s;
	}

	.el-button.nav-item:hover {
		background: linear-gradient(90deg, #6dd5fa 0%, #3498db 100%);
		color: #fff;
		box-shadow: 0 4px 16px rgba(52, 152, 219, 0.18);
	}

	.avatar-img {
		cursor: pointer;
		transition: transform 0.2s, box-shadow 0.3s;
		border: 2px solid #e6f7ff;
		box-shadow: 0 2px 8px rgba(52, 152, 219, 0.10);
	}

	.avatar-img:hover {
		transform: scale(1.1);
		border-color: #3498db;
		box-shadow: 0 4px 16px rgba(52, 152, 219, 0.18);
	}

	.avatar-dropdown .el-dropdown-menu {
		top: 100%;
		right: 0;
		left: auto;
		margin-top: 5px;
		border-radius: 12px;
		box-shadow: 0 4px 16px rgba(52, 152, 219, 0.12);
	}

	.logout-menu .el-dropdown-item {
		text-align: center;
		padding: 10px 18px;
		border-radius: 8px;
		transition: background 0.2s;
	}

	.logout-menu .el-dropdown-item:hover {
		background: #e6f7ff;
		color: #3498db;
	}

	.mobile-menu-btn {
		display: none;
		background: none;
		border: none;
		cursor: pointer;
	}

	.mobile-menu-btn span {
		display: block;
		width: 45px;
		height: 3px;
		background: #2c3e50;
		margin: 5px 0;
		border-radius: 2px;
	}

	@media (max-width: 1200px) {
		.container {
			padding: 10px 10px 10px 10px;
		}

		.nav-links {
			gap: 18px;
		}

		.header-search {
			margin: 0 8px 0 8px;
		}

		.search-input {
			width: 180px;
			max-width: 90vw;
		}

		.logo img {
			height: 44px;
			width: 44px;
		}
	}

	@media (max-width: 900px) {
		.container {
			padding: 10px 2vw;
		}

		.header-search {
			margin: 0 2vw;
		}
	}

	@media (max-width: 768px) {
		.container {
			flex-direction: column;
			align-items: stretch;
			min-height: unset;
			padding: 10px 4vw;
			gap: 0;
		}

		.logo {
			justify-content: center;
			margin-bottom: 8px;
		}

		.nav-links {
			flex-direction: column;
			gap: 8px;
			justify-content: flex-start;
			align-items: stretch;
			margin-bottom: 8px;
		}

		.header-search {
			margin: 8px 0 0 0;
			justify-content: stretch;
			min-width: 0;
		}

		.search-input {
			width: 80%;
			min-width: 0;
			font-size: 1.1rem;
			padding: 12px 10px;
		}

		.header-user {
			justify-content: center;
			margin-bottom: 8px;
			gap: 10px;
		}

		.el-button.nav-item {
			font-size: 1.1rem;
			padding: 12px 18px;
		}
	}
</style>